<!--
	开发者:宋成恩
	开发时间:2017-7-9
	修改时间:2017-7-9
	功能:个人用户修改简历中的技能证书,单独的表单组件  ../PersonResume.vue中调用
 -->
<template>
  <div id="resumeCertificateForm">
    <el-form :model="certificateInfo" :rules="certificateInfoRules" ref="certificateInfoInfoForm" label-width="110px">
      <el-row>
        <el-col :span="10">
          <el-form-item label="证书名称：" prop="certificate_name">
            <el-input v-model="certificateInfo.certificate_name" size="small" style="width:100%"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="发证时间：" prop="certificate_date">
            <el-date-picker v-model="certificateInfo.certificate_date" type="date" size="small"
                            :picker-options="pickerOptions" :clearable="false" style="width:100%"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row v-if="certificateId !== 'add'">
      <el-col :span="5" :offset="1">
        <div :style="{'font-size':'1.3em','margin-top':'10px'}">技能证书正面照</div>
        <upload-image-card :config="uploadConfig" :parameter="positiveParameter"
                           :defaultImageUrl="certificateInfo.certificate_file_url1"
                           @sendUploadImageResponse="getPositiveImageResponse"></upload-image-card>
      </el-col>
      <el-col :span="5">
        <div :style="{'font-size':'1.3em','margin-top':'10px'}">技能证书反面照</div>
        <upload-image-card :config="uploadConfig" :parameter="negativeParameter"
                           :defaultImageUrl="certificateInfo.certificate_file_url2"
                           @sendUploadImageResponse="getNegativeImageResponse"></upload-image-card>
      </el-col>
    </el-row>
    <div class="btn-box" :style="{'margin-top': '20px'}">
      <el-button type="info" size="large" @click="checkCertificateInfoData">保存</el-button>
      <el-button type="info" size="large" @click="cancelCertificateInfoEdit">取消</el-button>
    </div>
  </div>
</template>
<script>
  import { postDataToServer } from '../../../assets/js/post.js'
  import { formatterTime } from '../../../assets/js/common.js'
  import UploadImageCard from '@/components/common/UploadImageCard'

  export default {
    name: 'resumeCertificateForm',
    props: ['resumeId', 'certificateId'],
    data () {
      return {
        uploadConfig: {
          type: 'HM_RESUME_CERTIFICATE_IMG_ADD',
          width: '200px',
          height: '150px',
          tip: '<i style="color:red">* </i>请上传JPG或PNG格式的照片'
        },
        //正面
        positiveParameter: {
          id: '',
          certificate_type: 0
        },
        //反面
        negativeParameter: {
          id: '',
          certificate_type: 1
        },
        certificateInfo: {
          certificate_date: '',
          certificate_name: '',
          certificate_file_url1: '',
          certificate_file_url2: '',
        },
        certificateInfoSqare: {
          certificate_date: '',
          certificate_name: '',
          certificate_file_url1: '',
          certificate_file_url2: '',
        },
        certificateInfoRules: {
          certificate_name: [
            {min: 0, max: 50, message: '最多可填写50个汉字', trigger: 'change'}
          ]
        },
        pickerOptions: {
          disabledDate (time) {
            return Date.now() - 8.64e7 < time.getTime()
          }
        },
      }
    },
    components: {UploadImageCard},
    created () {
      if (this.certificateId !== 'add') {
        this.positiveParameter.id = this.certificateId
        this.negativeParameter.id = this.certificateId
        this.getCertificateInfo()
      } else {
        this.certificateInfo = this.certificateInfoSqare
      }
    },
    methods: {
      //正面
      getPositiveImageResponse (data) {
        if (data.status === 0) {
          this.$message.success('上传成功')
          this.certificateInfo.certificate_file_url1 = data.portrait_url
        } else {
          this.$message.error(data.message)
        }
      },
      //反面
      getNegativeImageResponse (data) {
        if (data.status === 0) {
          this.$message.success('上传成功')
          this.certificateInfo.certificate_file_url2 = data.portrait_url
        } else {
          this.$message.error(data.message)
        }
      },
      getCertificateInfo () {
        let _this = this
        let parameter = new Object()
        parameter.id = this.certificateId
        postDataToServer('HM_RESUME_CERTIFICATE_GET', parameter).then((data) => {
          if (data.status === 0) {
            _this.certificateInfo = data.data_list
          }
        })
      },
      checkCertificateInfoData () {
        let _this = this
        this.$refs['certificateInfoInfoForm'].validate((valid) => {
          if (valid) {
            _this.saveCertificateInfoData()
          } else {
            this.$message({
              message: '存在数据填写错误！',
              type: 'error'
            })

          }
        })
      },
      saveCertificateInfoData () {
        let _this = this
        let path = 'HM_RESUME_CERTIFICATE_EDIT'
        if (this.certificateId === 'add') {
          path = 'HM_RESUME_CERTIFICATE_ADD'
          this.certificateInfo.resume_id = this.resumeId
        }
        this.certificateInfo.certificate_date = formatterTime('date', this.certificateInfo.certificate_date)
        postDataToServer(path, this.certificateInfo).then((data) => {
          if (data.status === 0) {
            _this.$emit('sendEditCertificateStatus', 'success')
          } else {
            _this.$message.error(data.message)
          }
        })
      },
      cancelCertificateInfoEdit () {
        this.$emit('sendEditCertificateStatus', 'cancel')
      }
    }
  }
</script>
<style scoped>
  .btn-box {
    width: 90%;
    text-align: center;
  }
</style>
